<template>
  <div class="editor" style="z-index: 0">
    <div ref="editorRef"></div>
  </div>
</template>

<script>
import { onBeforeUnmount, ref, onMounted, watch } from "@vue/runtime-core";
import WangEditor from "wangeditor";

export default {
  name: "WangEditor",
  props: ["a_html"],
  emits: ["editorContent"],
  // model: {
  //   prop: "eContent",
  //   event: "change"
  // },
  // props: {
  //   eContent: { required: true }
  // },

  setup(props, { emit }) {
    const editorRef = ref();
    // console.log("a_html:" + props.a_html);
    // watch(
    //   () => props.a_html,
    //   (val, prevVal) => {
    //     console.log(`text is: ` + val);
    //   }
    // );

    // // 真正的编辑器里的内容
    let eContent = "";
    // 编辑器对象
    let editor;

    onMounted(() => {
      // 初始化
      editor = new WangEditor(editorRef.value);
      // watch(
      //   () => props.text,
      //   (val, prevVal) => {
      //     console.log(`text is: ` + val);
      //   }
      // );

      // 配置菜单栏，删减菜单，调整顺序
      editor.config.menus = [
        "bold",
        "head",
        "fontSzie",
        "fontName",
        "italic",
        "underline",
        "lineHeight",
        "indent",
        "link",
        "quote",
        "emoticon",
        "image",
        "code",
      ];

      // 设置编辑区域高度
      editor.config.height = 600;
      editor.config.zIndex = 0;

      // 当编辑器内容变化的时候通知父组件
      Object.assign(editor.config, {
        onchange(html) {
          eContent = html;
          // 通知父级控件方法
          emit("editorContent", html);
          // console.log(html);
        },
      });

      // 配置上传图片接口地址
      editor.config.uploadImgServer = "/api/user/publish/uploadImg";

      editor.config.uploadImgMaxLength = 5; // 一次最多上传 5 张图片

      // 定义上传图片的默认名字
      editor.config.uploadFileName = "img";

      // 隐藏插入网络图片的功能
      editor.config.showLinkImg = false;

      // 回调函数
      editor.config.uploadImgHooks = {
        // 上传图片之前
        before: function (xhr) {
          console.log(xhr);

          // // 可阻止图片上传
          // return {
          //   prevent: true,
          //   msg: "图片上传已取消",
          // };
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function (xhr) {
          console.log("success", xhr);
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function (xhr, editor, resData) {
          console.log("fail", resData);
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
          console.log("error", xhr, resData);
        },
        // 上传图片超时
        timeout: function (xhr) {
          console.log("timeout");
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function (insertImgFn, result) {
          // result 即服务端返回的接口
          console.log("customInsert", result);

          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          insertImgFn(result.data.data[0]);
        },
      };

      editor.create();
      if(props.a_html){editor.txt.html(props.a_html);}
      
    });

    onBeforeUnmount(() => {
      editor.destroy();
      editor = null;
    });

    return {
      editorRef,
      eContent,
    };
  },
};
</script>
